<template>
  <h1>部门管理</h1>
  <div id="box">
    <div id="tes">
      <button @click="inst()" class="btn">添加部门</button>
    </div>

  <table>
    <tr>
      <td>部门名称</td>
      <td>机构</td>
      <td>负责人</td>
      <td>联系电话</td>
      <td>移动电话</td>
      <td>传真</td>
      <td colspan="2">操作</td>
    </tr>
    <tr v-for="item in list">
      <td class="none">{{item.departId}}</td>
      <td>{{item.departName}}</td>
      <td>{{item.branch.branchName}}</td>
      <td>{{item.userInfo.userName}}</td>
      <td>{{item.connectMobileTelNo}}</td>
      <td>{{item.faxes}}</td>
      <td>{{item.connectTelNo}}</td>
      <td class="upd" @click="upd(item)">修改</td>
      <td class="del" @click="del(item.departId)">删除</td>
    </tr>
  </table>

  <div id="box2" ref="scref">
    <p class="p">修改信息</p>
    <p class="zfont2"><input type="text" v-model="kl.departId"></p>
    <p class="zfont">部门名称：<input type="text" v-model="kl.departName"></p>
    <p class="zfont">机构：
      <select v-model="ul">
        <option v-for="item in lists" :value="item.branchId">{{item.branchName}}</option>
      </select>
    </p>
    <p class="zfont">负责人：
      <select v-model="ul2">
        <option v-for="item in lists2" :value=item.userId>{{item.userName}}</option>
      </select>
    </p>
    <p class="zfont">联系电话：<input type="text" v-model="kl.connectMobileTelNo"></p>
    <p class="zfont">移动电话：<input type="text" v-model="kl.connectTelNo"></p>
    <p class="zfont">传真：<input type="text" v-model="kl.faxes"></p>
    <button @click="upda(kl.departId,kl.departName,kl.connectMobileTelNo,kl.connectTelNo,kl.faxes)" class="btn2">修改</button>
    <button @click="ex()" class="btn2">取消</button>
  </div>

    <div id="box2" ref="screfs">
      <p class="p">添加部门</p>
      <p class="zfont">部门名称：<input type="text" v-model="cl"></p>
      <p class="zfont">机构：
        <select v-model="uls">
          <option v-for="item in lists" :value="item.branchId">{{item.branchName}}</option>
        </select>
      </p>
      <p class="zfont">负责人：
        <select v-model="uls2">
          <option v-for="item in lists2" :value=item.userId>{{item.userName}}</option>
        </select>
      </p>
      <p class="zfont">联系电话：<input type="text" v-model="cl2"></p>
        <p class="zfont">移动电话：<input type="text" v-model="cl3"></p>
        <p class="zfont">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;传真：<input type="text" v-model="cl4"></p>
        <button @click="updas()" class="btn2">添加</button>
        <button @click="exs()" class="btn2">取消</button>
    </div>

  </div>

</template>

<script setup>
import {ref} from "vue";
import api from "@/router/axios.js";
const scref = ref();
const screfs = ref();
let list = ref({});
let kl = ref({});
let ul = ref({});
let ul2 = ref({});
let cl =ref();
let cl2 =ref();
let cl3 =ref();
let cl4 =ref();
let uls = ref({});
let uls2 = ref({});
setl();

function setl(){
  api({
    url:"/selectAll",
  }).then(resp=>{
    list.value = resp.data
    console.log(resp.data)
  })
}



login();
let lists2 = ref({})
function login(){
  api({url:"/selUserInfo",
  }).then(resp=>{
    lists2.value = resp.data

  })
}
selectAll();
let lists = ref({})
function selectAll(){
  api({
    url:"/branch",
  }).then(resp=>{
    lists.value = resp.data
  })
}

function upda(departId,departName,connectMobileTelNo,connectTelNo,faxes){
  scref.value.style.display="none";
  api({
    url:"/user",method:"put",
    params:{"departId":departId,"departName":departName,"connectMobileTelNo":connectMobileTelNo,"connectTelNo":connectTelNo,"faxes":faxes,"branchId":ul.value,"principalUser":ul2.value}
  }).then(resp=>{
    alert(resp.data.message)
    setl();
  })
}

function upd(item){
  scref.value.style.display="block";
  kl.value=item;
  ul.value = kl.value.branch.branchId;
  ul2.value = kl.value.userInfo.userId;
}

function inst(){
  screfs.value.style.display="block";
}
function ex(){
  scref.value.style.display="none";
}

function del(id){
  api({
    url:"/user",
    method:"delete",params:{"departId":id}
  }).then(resp=>{
    alert(resp.data.message)
    setl();
  })
}

function updas(){
  screfs.value.style.display="none";
  api({
    url:"/user",method:"post",
    params:{"departName":cl.value,"connectMobileTelNo":cl2.value,"connectTelNo":cl3.value,"faxes":cl4.value,"branchId":uls.value,"principalUser":uls2.value}
  }).then(resp=>{
    alert(resp.data.message)
    uls.value={};
    uls2.value={};
    cl.value = "";
    cl2.value = "";
    cl3.value = "";
    cl4.value = "";
    setl();
  })
}
function exs(){
  screfs.value.style.display="none";
}



</script>

<style scoped>
#box{
  width: 100%;
  height: 100%;
  margin-top:20px;
}
.p{
  text-align: center;
  color: red;
  font-size: 20px;
}
select{
  width: 400px;
  height: 30px;
  margin-left:60px;
}
.zfont{
  margin-left: 20px;
}
.zfont2{
  display: none;
}
table{
  text-align: center;
  border-collapse:collapse;
}
td{
  width: 180px;
  height: 60px;
  border:1px solid black;
}
.none{
  display: none;
}
.upd:hover{
  cursor: pointer;
  color:red;
}
#box2{
  width: 600px;
  height: 500px;
  background: #e7e7e7;
  position: fixed;
  left: 35%;
  top:10%;
  display: none;
}
.del:hover{
  cursor: pointer;
  color:red;
}
.btn{
  margin-left: 60px;
  width: 100px;
  height: 30px;
}
.btn2{
  margin-left: 50px;
  width: 200px;
  height: 30px;
}

#tes{
  margin-bottom:30px;
}
input{
  margin-left:60px;
  width: 400px;
  height: 30px;
}
</style>